<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增参数')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style>
        .file-input .theme-fas .file-input-ajax-new {
            width: 70%;
            margin-left: 150px;
        }

        .fileinput-upload-button {
            display: none !important;
        }
        .layui-layer-btn-{
            display: none !important;
        }
        .layui-layer-btn{
            display: none !important;
        }

        .layer-ext-moon{
            display: none !important;
        }
.layui-layer-btn0{
    display: none !important;
}

    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-config-add" name="form-config-add" enctype="multipart/form-data">

        <div class="form-group">
            <label class="col-sm-3 control-label">项目概况：</label>
            <div class="col-sm-8">
                <textarea style="width: 460px" id="programDesc" placeholder="详细描述项目情况" name="programDesc" class="form-control">[[${progressplan.programDesc}]]</textarea>
            </div>
        </div>

        <div class="form-group">
            <div style="width: 73%;margin-left: 110px">
                <label class="font-noraml">项目效果图:</label>
                <div class="file-loading">
                    <input class="file" type="file" id="filePath" multiple data-min-file-count="1" data-theme="fas">
                </div>
            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript" >
    var prefix = ctx + "progressplan";

    /* 获取服务端返回变量 */
    var progressplan = [[${progressplan}]];
    console.log(progressplan)
    var programId = [[${progressplan.programId}]];

    // 图片的回显
    var fileArr = new Array();
    fileArr.push([[${progressplan.viPath}]]);
    if (fileArr != '' || fileArr != null) {
        $('#filePath').fileinput({
            language: 'zh',                                        //语言
            uploadUrl: '<%=basePath%>/commodity/addCommodityPic',   //上传地址

            showPreview: true,				//展前预览
            showUpload: false,				//显示上传按钮
            showCaption: false,				//显示文字表述
            uploadAsync: false,                             //false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口
            removeFromPreviewOnError: true, //当选择的文件不符合规则时，例如不是指定后缀文件、大小超出配置等，选择的文件不会出现在预览框中，只会显示错误信息
            maxFileCount: 1,
            maxFileSize: 1024 * 10,			//单位为kb，如果为0表示不限制文件大小
            allowedFileExtensions: ["jpg", "jpeg", "gif", "png", "bmp", "pdf", "doc", "docx"],
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: fileArr,
            initialPreviewConfig: [ //配置预览中的一些参数
                {
                    caption: "transport-1.jpg",
                    size: 329892,
                    width: "120px",
                    url: "deletePic",
                    // 注意: 1-progressId必填，用于图片物理路径的删除  2-key用于后台接收
                    key: programId
                },
                {
                    caption: "transport-2.jpg",
                    size: 872378,
                    width: "120px",
                    url: "deletePic",
                    key: programId
                }
            ]
        }).on('filepredelete', function (event, key, jqXHR, data) {
            console.log('Key = ' + key);
            console.log(jqXHR);
            console.log(data);
        });
    }

    function submitHandler() {
        $.modal.close();
    }

</script>
</body>
</html>
